<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="showAddFrom">新增</el-button>
                </div>
            </template>
            <template #form>
                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
                    <el-form-item prop="bizTypeName">
                        <el-select v-model="formInline.bizTypeName" filterable clearable @change="changeTypeClidOptions"
                            placeholder="请选择业务类型">
                            <el-option v-for="item in TypeOptions" :key="item.typeName" :label="item.typeName"
                                :value="item.typeName" />
                        </el-select>
                    </el-form-item>
                </SearchForm>
            </template>
            <template #table="tableScope">
              <PubilcTable style="width: 100%;" :isSlot="false" :actionLimit="actionLimit" :isLazy="isLazy" :tableHeight="tableScope.tableHeight" :getLazyCild="getLazyCild"
                :table-data="tableData" :list-config="columns" :page-data="pageData" :show-page-size="false"
                @on-action="onAction" />
            </template>
        </page-view>
        <eForm :dialog-visible="dialogVisible" :is-add="isAdd" :typeOptions="TypeOptions" :tableData="tableData" :formData="formData"
            @on-submit="formSubmit" @handle-close="handleClose" />
    </div>
</template>
<script  setup>
import { reactive, ref } from 'vue'
import eForm from './components/addForm.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import api from '@/api/index'
import getBizSub from '@/util/getBizSub'
let router = useRouter();
const formInline = reactive({})
const dialogVisible = ref(false)
const isAdd = ref('add')
const formData = ref({})
const TypeOptions = ref([])
const TypeClidOptions = ref([])
const tableData = ref([])
const pageData = ref({
    pageNum: 1,
    pageSize: 999,
    total: 0
})
const isLazy = ref(true)
const OPERTATE = [
    { alias: 'edit', label: '编辑' },
    { alias: 'del', label: '删除' },
    { alias: 'addSub', label: '添加子类' },
    // { alias: 'addChild', label: '添加下级' },
]
const columns = [
    { alias: 'subBizName', label: '业务子类名称', align: 'left'},
    { alias: 'bizTypeName', label: '业务类型' },
    { alias: 'businessCode', label: '业务子类编号' },
    { label: '操作', listArr: OPERTATE, width: '180px', fixed: 'right', type: 'action' }
]
function _makePath(tree, children, key, target) {
    var done = false, path = [];
    function traverse(tree, target) {
        for (let i = 0; i < tree.length; i++) {
            const node = tree[i];
            if (!done) {
                if (i > 0) {
                    path.pop()
                }
                path.push(i)
                if (node[key] === target) {
                    done = true
                    return
                } else {
                    let c = node[children];
                    if (c) {
                        traverse(c, target);
                    }
                }
            }
        }
        if (!done) {
            path.pop();
        }
        return;
    }
    traverse(tree, target);
    return path;
}
const actionLimit = ([item, row, scope]) => {
  if (row.alias === 'addSub') {
    let path = _makePath(tableData.value, 'children', 'id' ,item.id, '@@@@')
    if (path && path.length > 5) {
      return true
    }
    return false
  }
}
onMounted(()=>{
    getTypeOptions()
    getTypeClidOptions()
    onSearch()
})

const getLazyCild = api.reimbursement.getTypeClidById

const onAction = ([item, row]) => {
    const obj = {
        'addSub': addSub,
        'del': deleteData,
        'edit': editData,
        'pageNum': onSearch,
        'pageSize': onSearch
    }
    if (typeof item === 'string') {
        pageData.value[item] = row
        if (item === 'pageSize') pageData.value.pageNum = 1
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}
const addSub = (row) => {
  // 新增子类
  console.log(row, 's')
  dialogVisible.value = true
  formData.value = { ...row, parentId: row.id }
  isAdd.value = 'addSub'
}
const getTypeOptions = ()=>{
    const params = {pageNum:1, pageSize:5000}
    api.reimbursement.getBizTypeList(params).then((res)=>{
        TypeOptions.value = res.list || []
    })
}

const getTypeClidOptions = () => {
    if(formInline.value && formInline.value.bizTypeName){
        const params = {bizName: formInline.value.bizTypeName}
        api.reimbursement.getTypeClidOption(params).then((res)=>{
            TypeClidOptions.value = res
        })
    }else{
        TypeClidOptions.value = []
    }
}

const changeTypeClidOptions = (val)=>{
    const params = {bizName: val}
    if(formInline && formInline.subBizName) {
        formInline.subBizName = ''
    }
    api.reimbursement.getBusinessByName(params).then((res)=>{
        TypeClidOptions.value = res
    })
}

const onSearch = () => {
    const params = { ...formInline, ...pageData.value}
    tableData.value = []
    api.reimbursement.getTypeClidList(params).then((res) => {
        console.log(res,'777')
        tableData.value = getBizSub(res.list || [])
        console.log(tableData.value, '777')
        pageData.value.total = res.total
    })
}

const showAddFrom = () => {
    dialogVisible.value = true
    isAdd.value = 'add'
}
const formSubmit = (val)=>{
    const params = {...val}
    if(isAdd.value === 'add' || isAdd.value === 'addSub'){
        api.reimbursement.createTypeClid(params).then((res)=>{
            ElMessage({
                type: 'success',
                message: '新增成功!'
            });
            dialogVisible.value = false
            onSearch()
        })
    }else{
        api.reimbursement.updateTypeClid(params).then((res)=>{
            ElMessage({
                type: 'success',
                message: '修改成功!'
            });
            dialogVisible.value = false
            onSearch()
        })
    }
}
const handleClose = val => {
    dialogVisible.value = val
}
const editData = (val)=>{
    dialogVisible.value = true
    formData.value = val
    isAdd.value = 'edit'
}
const deleteData = (val)=>{
    ElMessageBox.confirm('确定删除此业务子类吗？删除后将不可恢复。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const id = val.id
        api.reimbursement.deleteTypeClid(id).then((res)=>{
            ElMessage({
                type: 'success',
                message: '删除成功!'
            });
            onSearch()
        })
    })
}

</script>

<style lang="scss" scoped>

</style>
